
/*
 * 當要刪除頁籤時，再次詢問管理者是否確認刪除？
 */
function onBeforeClose(panel, eOpts)
{
	Ext.MessageBox.confirm('再次確認：', '是否刪除 『' + panel.title + '』 頁籤？', function(btn)
	{
		if('yes' == btn)
		{
			panel.destroy();
		}
		else
		{}
	});
	
	//因為ext的messageBox的運作方式為非同步，所以我預設都"取消Tab的刪除"。
	return false;
}

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../../js/ext_ux');

Ext.onReady(function()
{
	var tabs4 = Ext.widget('tabpanel', {
		id: 'tabpanel_tab',
        renderTo: Ext.getBody(),
        activeTab: 0,
        width: 600,
        height: 150,
        plugins: tabReorderer = Ext.create('Ext.ux.TabReorderer'),
        items: [{
            xtype: 'panel',
			id: 'panel_first',
            title: 'tab不可拖',
            html: "这个选项卡不可被拖动",
            reorderable: false,
            closable: true,
			listeners: 
			{
				beforeclose: 
				{
					fn: onBeforeClose
				}
			}
        }],
    });
	
	tabs4.add({
			title: '基本情報',
			//我要利用'tab_'接上`topic_tab`的id。
			id: "tab_13",
			html: '选项卡文本部分 - 基本情報<br/><br/>',
			closable: true,
			listeners: 
			{
				beforeclose: 
				{
					fn: onBeforeClose
				}
			}
		});
		
	tabs4.add({
			title: '交通地圖',
			id: "tab_14",
			html: '选项卡文本部分 - 交通地圖<br/><br/>',
			closable: true,
			listeners: 
			{
				beforeclose: 
				{
					fn: onBeforeClose
				}
			}
		});
		
	tabs4.add({
			title: '價格表',
			id: "tab_15",
			html: '选项卡文本部分 - 價格表<br/><br/>',
			closable: true,
			listeners: 
			{
				beforeclose: 
				{
					fn: onBeforeClose
				}
			}
		});
		
	tabs4.add({
			title: '優惠券',
			id: "tab_16",
			html: '选项卡文本部分 - 優惠券<br/><br/>',
			closable: true,
			listeners: 
			{
				beforeclose: 
				{
					fn: onBeforeClose
				}
			}
		});
	
	/*
	 * 當拖曳頁籤，將頁籤放下時，console出此頁籤的舊位置索引值和新位置索引值。
	 */	
	tabReorderer.on('Drop', function(me, container, dragCmp, startIdx, idx, eOpts)
	{
		console.log(startIdx);
		console.log(idx);
		console.log('----------------');
	});

	/*
	 * 當按下此按鈕，console出目前得到焦點的頁籤的標題。
	 */
	Ext.create('Ext.Button', {
	    text: 'Get the actived tab\'s title',
	    renderTo: Ext.getBody(),
	    handler: function()
		{
	        console.log(tabs4.getActiveTab().title);
	    }
	});
	
	/*
	 * 當按下此按鈕，新增一個名叫"新的Tab"的頁籤，並且取得焦點。
	 */
	Ext.create('Ext.Button', {
	    text: 'Add a tab',
	    renderTo: Ext.getBody(),
	    handler: function()
		{
	        tabs4.add({
				title: '新的Tab',
				html: '选项卡文本部分 - 新的Tab<br/><br/>',
				closable: true,
				listeners: 
				{
					beforeclose: 
					{
						fn: onBeforeClose
					}
				}
			}).show();
	    }
	});
	
	/*
	 * 當按下此按鈕，從左到右依序console出各個頁籤的id，作為是否有頁籤被刪除或頁籤順序有變更的依據。
	 */
	Ext.create('Ext.Button', {
	    text: 'Console the order of tab',
	    renderTo: Ext.getBody(),
	    handler: function()
		{
			Ext.Array.each(tabs4.items.keys, function(el, index, itemsItSelf)
			{
				console.log(index);
			    console.log(el);
			});
	    }
	});

});	

    
		
